<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" 
			@clickItem="onClickItem" styleType="button" activeColor="#2B9939">
				
			</uni-segmented-control>			
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in imgs" :key="item._id">
				<view class="pic">
					<image :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author"> —— {{item.author}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="reload" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { callWithErrorHandling,computed } from 'vue';
import {onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app"

const imgs = ref([])

function network(){
	uni.showNavigationBarLoading()
/* 	uni.showLoading({
		mask:true,
		title:"加载中..."
	}) */
	uni.request({
		url:"https://tea.qingnian8.com/tools/petShow",
		data:{
			size:5,
			type:classify[current.value].key
		},
		header:{
			"access-key":"wqh512584164"
		}
	}).then(res=>{
		if(res.data.errCode === 0){
			imgs.value = [...imgs.value,...res.data.data]
		}else if (res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:3000
			})
			uni.showModal({
				title:"接口错误！",
				content:res.data.errMsg,
				success:(e)=>{
					if(e.confirm){
						network()
					}
				}
			})
			console.log(res.data.errCode);
		};
	}).catch(err=>{
		uni.showToast({
			title:"接口有误！",
			icon:"none"
		})
	}).finally(()=>{
		//uni.hideLoading()
		uni.hideNavigationBarLoading()
		uni.stopPullDownRefresh()
	})
}

const current = ref(0)
const classify = [
	{key:"all",value:"全部"},
	{key:"dog",value:"狗狗"},
	{key:"cat",value:"猫猫"},
]

const values = computed(()=>classify.map(item=>item.value))

const onClickItem = (e)=>{
	current.value = e.currentIndex
	imgs.value = []
	network()
}

const onRefresh = function (){
	uni.startPullDownRefresh()
}

	
const onTop = ()=>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}


network()

const onPreview = function(index){
	let urls = imgs.value.map(item=>item.url)
	uni.previewImage({
		current:index,
		urls
	})
}


onReachBottom(()=>{
	network()
})

onPullDownRefresh(()=>{
	imgs.value = []
	current.value=0
	network()
})


</script>

<style lang="scss" scoped>
	.container {
		.menu{
			padding: 50rpx 50rpx 0;
		}
		.layout {
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					image{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color: #333;
					font-size: 36rpx;
				}
				.author{
					padding: 0 30rpx 30rpx;
					text-align: right;
					color: #888;
					font-size: 30rpx;
				}
			}
		}
		.loadMore{
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding-bottom: env(safe-area-inset-bottom);
			.item{
				width: 90rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}
		}
	}
</style>
